<template>
	<div>
		<lun></lun>
		<div class="lk-count">
			<div class="lk-count-floor">
				<div class="lk-count-floor-left">
					<img src="../assets/biao.png" />
					<span class="lk-count-title1">礼拜五</span>
					<span class="lk-count-title2">friday</span>
				</div>
				<div class="lk-count-floor-right">
					<div class="lk-count-floor-times">
						<em id="lk-time">1</em>
						<span class="lk-time-td">1</span>
						<i></i>
						<span class="lk-time-th">1</span>
						<i>:</i>
						<span class="lk-time-tm">1</span>
						<i>:</i>
						<span class="lk-time-ts">1</span>
					</div>
					<a href="###">更多></a>
				</div>
			</div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="lk-count-thing" v-for="(v,i) in arr" v-if="i<=2" :id="v._id">
							<img class="lk-count-img" :src="v.imgurl" />
							<div class="lk-count-thing-int">
								<h4>{{v.name}}</h4>
								<span>礼拜五价：</span>
								<span>{{v.pric}}</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div>
			<div class="lk-count-floor">
				<div class="lk-count-floor-left">
					<img src="../assets/biao.png" />
					<span class="lk-count-title1">新鲜水果</span>
					<span class="lk-count-title2">优选全球好货</span>
				</div>
				<div class="lk-count-floor-right">
					<a href="###">更多></a>
				</div>
			</div>
			<ul class="lk-count-food">
				<li v-for="(v,i) in arr" v-if="i<=6&&i>2" :id="v._id"><img :src="v.imgurl" />
					<div>
						<h4>{{v.name}}</h4>
						<h5></h5>
						<span>{{v.pric}}</span>
						<span>{{v.free}}</span>
						<img src="../assets/lkgwc.png" class="lk-gwc" />
					</div>
				</li>
			</ul>
			<flo>蔬菜净菜</flo>
			<ul class="lk-count-food">
				<li v-for="(v,i) in arr" v-if="i<=10&&i>6" :id="v._id"><img :src="v.imgurl" />
					<div>
						<h4>{{v.name}}</h4>
						<h5></h5>
						<span>{{v.pric}}</span>
						<span>{{v.free}}</span>
						<img src="../assets/lkgwc.png" class="lk-gwc" />
					</div>
				</li>
			</ul>
			<flo>肉类家禽</flo>
			<ul class="lk-count-food">
				<li v-for="(v,i) in arr" v-if="i<=14&&i>10" :id="v._id"><img :src="v.imgurl" />
					<div>
						<h4>{{v.name}}</h4>
						<h5></h5>
						<span>{{v.pric}}</span>
						<span>{{v.free}}</span>
						<img src="../assets/lkgwc.png" class="lk-gwc" />
					</div>
				</li>
			</ul>
			<flo>海鲜水产</flo>
			<ul class="lk-count-food">
				<li v-for="(v,i) in arr" v-if="i<=18&&i>14" :id="v._id"><img :src="v.imgurl" />
					<div>
						<h4>{{v.name}}</h4>
						<h5></h5>
						<span>{{v.pric}}</span>
						<span>{{v.free}}</span>
						<img src="../assets/lkgwc.png" class="lk-gwc" />
					</div>
				</li>
			</ul>
			<flo>粮油副食</flo>
			<ul class="lk-count-food">
				<li v-for="(v,i) in arr" v-if="i<=22&&i>18" :id="v._id"><img :src="v.imgurl" />
					<div>
						<h4>{{v.name}}</h4>
						<h5></h5>
						<span>{{v.pric}}</span>
						<span>{{v.free}}</span>
						<img src="../assets/lkgwc.png" class="lk-gwc" />
					</div>
				</li>
			</ul>
			<flo>零食酒水</flo>
			<ul class="lk-count-food">
				<li v-for="(v,i) in arr" v-if="i<=26&&i>22" :id="v._id"><img :src="v.imgurl" />
					<div>
						<h4>{{v.name}}</h4>
						<h5></h5>
						<span>{{v.pric}}</span>
						<span>{{v.free}}</span>
						<img src="../assets/lkgwc.png" class="lk-gwc" />
					</div>
				</li>
			</ul>
			<flo>蛋奶素食</flo>
			<ul class="lk-count-food">
				<li v-for="(v,i) in arr" v-if="i<=29&&i>26" :id="v._id"><img :src="v.imgurl" />
					<div>
						<h4>{{v.name}}</h4>
						<h5></h5>
						<span>{{v.pric}}</span>
						<span>{{v.free}}</span>
						<img src="../assets/lkgwc.png" class="lk-gwc" />
					</div>
				</li>
			</ul>
			<flo>全球代购</flo>
			<ul class="lk-count-food">
				<li v-for="(v,i) in arr" v-if="i<=33&&i>29" :id="v._id"><img :src="v.imgurl" />
					<div>
						<h4>{{v.name}}</h4>
						<h5></h5>
						<span>{{v.pric}}</span>
						<span>{{v.free}}</span>
						<img src="../assets/lkgwc.png" class="lk-gwc" />
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import Lun from './lunbo'
	import 'swiper/dist/css/swiper.min.css';
	import Flo from './floor';
	export default {
		name: "count",
		data() {
			return {
				arr: []
			}
		},
		components: {
			Flo,
			Lun
		},
		mounted() {
			var _this = this;
			$(function() {
				$.ajax({
					type: "get",
					url: "http://localhost:8088/getthing",
					async: true,
					data: {
						act: 'qb'
					},
					dataType: 'json',
					success(data) {
						console.log(data)
						_this.arr = data;
					}
				});
			})

			var b = new Swiper('.swiper-container', {
				direction: 'horizontal',
				pagination: '.swiper-pagination',
				autoplayStopOnLast: false,
			})

			setInterval(getRTime, 1000);

			function getRTime() {

				//				var EndTime = new Date();
				var timedate = "276869";
				var type = 1;
				if(timedate == '0') {
					return false;
				}
				if(type == 2) {
					$('#lk-time').html("距离结束 ");
				} else {
					$('#lk-time').html("距离开始 ");
				}
				var EndTime = new Date("2018/04/06 00:00:00");
				var NowTime = new Date();
				var t = EndTime.getTime() - NowTime.getTime();
				var d = Math.floor(t / 1000 / 60 / 60 / 24);
				var h = Math.floor(t / 1000 / 60 / 60 % 24);
				var m = Math.floor(t / 1000 / 60 % 60);
				var s = Math.floor(t / 1000 % 60);
				if(t > 0) {
					$('.lk-time-td').html(d + "天");
					if(h < 10) {
						$('.lk-time-th').html('0' + h);
					} else {
						$('.lk-time-th').html(h);
					}
					if(m < 10) {
						$('.lk-time-tm').html('0' + m);
					} else {
						$('.lk-time-tm').html(m);
					}
					if(s < 10) {
						$('.lk-time-ts').html('0' + s);
					} else {
						$('.lk-time-ts').html(s);
					}

				} else {
					window.location.reload();
				}
			}
		},
		methods: {}

	}
</script>

<style scoped>
	.lk-count-food>li>img {
		height: 305px;
		width: 100%;
		vertical-align: middle;
	}
	
	.lk-gwc {
		width: 34px;
		height: 30px;
		position: absolute;
		bottom: 12px;
		right: 18px;
		cursor: pointer;
		vertical-align: middle;
		z-index: 999;
	}
	
	.lk-count-food {
		overflow: hidden;
	}
	
	.lk-count-food>li:first-child {
		margin-left: 0;
	}
	
	.lk-count-food>li {
		float: left;
		margin: 20px 0 20px 20px;
		width: 303px;
		border: solid 1px #ECECEC;
		position: relative;
		cursor: pointer;
	}
	
	.lk-count-food>li:hover {
		border: solid 1px green;
	}
	
	.lk-count-food>li>div {
		padding: 10px 30px;
	}
	
	.lk-count-food>li>div>h4 {
		font-size: 18px;
		margin-top: 10px;
		margin-bottom: 10px;
		font-weight: 500;
		line-height: 1.1;
		color: inherit;
		font-family: inherit;
	}
	
	.lk-count-food>li>div>h5 {
		color: #666666;
		height: 15px;
		overflow: hidden;
		line-height: 15px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.lk-count-food div>span:nth-child(3) {
		font-size: 20px;
		color: #FF5757;
		font-weight: 500;
	}
	
	.lk-count-food div>span:nth-child(4) {
		margin-left: 5px;
		font-size: 16px;
		color: #666666;
		text-decoration: line-through;
		font-weight: 500;
	}
	
	.lk-count {
		width: 1280px;
		margin: 0 auto;
	}
	
	.lk-count-floor {
		height: 100px;
		padding: 0 30px;
		overflow: hidden;
		background-color: #EBFFE8;
		border-bottom: solid 1px #498E3D;
	}
	
	.lk-count-floor-left {
		float: left;
		height: 100%;
	}
	
	.lk-count-floor-left>img {
		vertical-align: -10px;
		width: 36px;
		height: 40px;
	}
	
	.lk-count-title1 {
		display: inline-block;
		padding: 30px 10px 0;
		font-size: 30px;
		color: #498E3D;
	}
	
	.lk-count-title2 {
		margin-top: 40px;
		font-size: 20px;
		color: #999999;
	}
	
	.lk-count-floor-right {
		float: right;
	}
	
	.lk-count-floor-times {
		display: inline-block;
		padding: 30px 20px 0 0;
		font-size: 20px;
		color: #4B943D;
		line-height: 1.1;
	}
	
	.lk-count-floor-times>em {
		display: inline-block;
		font-size: 20px;
		color: #4B943D;
		font-weight: 500;
	}
	
	.lk-count-floor-times span {
		display: inline-block;
		line-height: 40px;
		width: 60px;
		height: 40px;
		background-color: #F08200;
		border-radius: 5px;
		color: #fff;
		text-align: center;
	}
	
	.lk-count-floor-times i {
		margin-left: 5px;
		text-align: center;
		font-style: normal;
		color: #F08200;
	}
	
	.lk-count-floor-right a {
		line-height: 100px;
		font-size: 20px;
		color: #4B943D;
		font-weight: 500;
	}
	
	.swiper-slide {
		overflow: hidden;
	}
	
	.swiper-container {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	
	.lk-count-thing {
		width: 305px;
		float: left;
		margin: 20px 20px 40px 0;
		height: 435px;
		background-color: #F8F6F7;
	}
	
	.lk-count-img {
		width: 295px;
		height: 295px;
		padding: 5px;
		vertical-align: middle;
	}
	
	.lk-count-thing-int {
		padding: 10px 30px;
		text-align: center;
	}
	
	h4 {
		font-size: 18px;
		margin-top: 10px;
		margin-bottom: 10px;
		font-family: inherit;
		font-weight: 500;
		line-height: 1.1;
		color: inherit;
	}
	
	.lk-count-thing-int span:nth-child(2) {
		color: #F18B25;
		font-size: 18px;
	}
	
	.lk-count-thing-int span:last-child {
		color: #FF5757;
		font-size: 20px;
	}
</style>